/**
 * Author: Shen Yanqiu
 * Date: 2018-02-26
 * Time: 11:38
 *
 */
import React from 'react';
import { Page, AreaChartBlock } from 'components';
import TopRightButton from "components/TopOperation/TopRightButton";
import { Row, Col, Card, Table } from 'antd';
import { connect } from 'dva';
import { routerRedux } from "dva/router";
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import styles from './style.less';
import classNames from "classnames";

class RecruitnewStatisticsDataStatistics extends React.Component {
  static propTypes = {
    dispatch: PropTypes.func,
    recruitnewStatisticsDataStatistics: PropTypes.object,
    loading: PropTypes.object,
  };
  render () {
    const { dispatch, recruitnewStatisticsDataStatistics, loading } = this.props;
    const { areaChartDate, list, pagination } = recruitnewStatisticsDataStatistics;
    const clickTopRightHandle = () => {
      dispatch(routerRedux.push('/recruitnew-statistics/uploadTableFile'));
    };

    const columns = [{
      title: '序号',
      width: 100,
      dataIndex: 'xuhao',
      key: 'xuhao',
    }, {
      title: '部门',
      width: 150,
      dataIndex: 'bumen',
      key: 'bumen',
    }, {
      width: 800,
    }, {
      fixed: 'right',
      width: 150,
      title: '人员',
      dataIndex: 'presentPerson',
      key: 'presentPerson',
      render: (text, record) => <span>{ text }</span>,
    }];

    const changePaginationHandler = (_pagination) => {
      dispatch({
        type: 'recruitnewStatisticsDataStatistics/loadTableList',
        payload: {
          current: _pagination.current,
          pageSize: _pagination.pageSize,
        },
      });
    };
    return (
      <Page loading={loading.effects['recruitnewStatisticsDataStatistics/firstLoad']}>
        <Row className={styles.RecruitnewStatisticsDataStatistics}>
          <Col span={24}>
            <Card
              title={<span className={styles.CardTitle}>招新统计</span>}
              extra={<Link to={"/recruitnew-statistics/personDetails"}>查看人员详情</Link>}
              bordered={false}
            >
              <Col span={5}>
                <div className={styles.desc}>
                  <div className={styles.descDark}>累计报名人数</div>
                  <div className={styles.descLight}>4320</div>
                  <div className={classNames(styles.descDark, styles.descMarginTop)}>昨日报名人数</div>
                  <div className={styles.descLight}>342</div>
                </div>
              </Col>
              <Col span={19}>
                <Row justify={"space-between"} type={"flex"} align={"middle"}>
                  <Col>
                    <div className={styles.AreaChartTitle}>
                      报名人数趋势
                    </div>
                  </Col>
                </Row>
                <AreaChartBlock data={areaChartDate} />
              </Col>
            </Card>
          </Col>
          <Col span={24} className={styles.MarginTop}>
            <Card title={<span className={styles.CardTitle}>部门数据</span>} bordered={false} className={styles.CardTable}>
              <Table
                dataSource={list}
                columns={columns}
                // scroll={{ x: 1100, y: false }}
                pagination={pagination}
                onChange={changePaginationHandler}
                loading={loading.effects['recruitnewStatisticsDataStatistics/loadTableList']}
              />
            </Card>
          </Col>
        </Row>
        <TopRightButton clickHandle={clickTopRightHandle} contentText={"招新表格"} />
      </Page>
    );
  }
}
export default connect(({ loading, recruitnewStatisticsDataStatistics }) => ({ loading, recruitnewStatisticsDataStatistics }))(RecruitnewStatisticsDataStatistics);
